<template>
    <div>
        <h1>测试 el-select 可搜索下拉框</h1>
        <el-select :placeholder="text" v-model="selectedValue" filterable clearable :filter-method="dataFilter">
            <el-option v-for="item in selectedOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>

<script>

export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕11'
            }, {
                value: '选项2',
                label: '双皮奶22'
            }, {
                value: '选项3',
                label: '蚵仔煎33'
            }, {
                value: '选项4',
                label: '龙须面44'
            }, {
                value: '选项5',
                label: '北京烤鸭55'
            }],
            selectedValue: '',
            selectedOptions: [],
            text: "",
            ss: null
        };
    },
    mounted() {
        this.initParams();
    },
    methods: {
        initParams() {
            this.selectedOptions = this.options;
        },
        dataFilter(value) {
            this.text = value;
            this.selectedOptions = this.options.filter((item) => item.label.includes(value));
        },
    },
}
</script>
<style scoped></style>